<template>
  <receipts-table
    :url="url"
    :submit-form="submitForm"
    :submit-form-title="props.receiptsType"
    submit-form-width="70%"
    :detail-btn-visible="true"
    :detail-form-dialog="{ title: '单据', width: '800px' }"
    @data-format="dataFormat"
    @set-form-init-value="setFormInitValue"
    @submit-valid="submitValid"
  >
    <template #submitForm>
      <el-form
        :model="submitForm"
        :rules="formRules"
        :label-width="100"
        ref="submitFormRef"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="内部编码：" prop="no">
              <el-input v-model="submitForm.no" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手写编号：" prop="noHand">
              <el-input v-model="submitForm.noHand"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据名：" prop="name">
              <el-input v-model="submitForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <slot name="idJsonSlot"></slot>
        <el-form-item label="备注：" prop="remark">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="submitForm.remark"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item label="详情：">-->
        <!--          <el-tabs v-model="activeTab" style="width: 100%" type="border-card">-->
        <!--            <el-tab-pane label="订单详情" name="订单详情">-->
        <!--              <sub-table-->
        <!--                :table-data="submitForm.children"-->
        <!--                :table-field-list="subTableFieldList"-->
        <!--                :submit-form="subTableSubmitForm"-->
        <!--                @sub-table-delete="subTableDelete"-->
        <!--                @set-sub-table-form-init-value="setSubTableFormInitValue"-->
        <!--                @change-sub-table-record="changeSubTableRecord"-->
        <!--              >-->
        <!--                <template #subTableSubmitForm>-->
        <!--                  <el-form-->
        <!--                    :model="subTableSubmitForm"-->
        <!--                    :label-width="140"-->
        <!--                    ref="subTableSubmitFormRef"-->
        <!--                  >-->
        <!--                    <el-form-item label="自制件编码：" prop="homemadeNo">-->
        <!--                      <autocomplete-input-->
        <!--                        v-model="subTableSubmitForm.homemadeNo"-->
        <!--                        :value-key="selectedPropMapSub.selectedOriginProp"-->
        <!--                        @get-record="autocompleteInputEventSub.getRecords"-->
        <!--                        @change="-->
        <!--                          autocompleteInputEventSub.setSelectRow(-->
        <!--                            selectedPropMapSub.setProp,-->
        <!--                            selectedPropMapSub.setOriginProp,-->
        <!--                            selectedPropMapSub.selectedProp-->
        <!--                          )-->
        <!--                        "-->
        <!--                        @select="-->
        <!--                          autocompleteInputEventSub.setSelectRow(-->
        <!--                            selectedPropMapSub.setProp,-->
        <!--                            selectedPropMapSub.setOriginProp,-->
        <!--                            selectedPropMapSub.selectedProp-->
        <!--                          )-->
        <!--                        "-->
        <!--                      ></autocomplete-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="自制件名称：" prop="homemadeName">-->
        <!--                      <el-input-->
        <!--                        v-model="subTableSubmitForm.homemadeName"-->
        <!--                        disabled-->
        <!--                      ></el-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="型号：" prop="model">-->
        <!--                      <el-input v-model="subTableSubmitForm.model"></el-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="数量：" prop="quantity">-->
        <!--                      <el-input-->
        <!--                        v-model="subTableSubmitForm.quantity"-->
        <!--                      ></el-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="单位：" prop="unit">-->
        <!--                      <el-input v-model="subTableSubmitForm.unit"></el-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="已完成数量：" prop="completedQuantity">-->
        <!--                      <el-input-->
        <!--                        v-model="subTableSubmitForm.completedQuantity"-->
        <!--                      ></el-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item-->
        <!--                      label="期望交货日期："-->
        <!--                      prop="expectedDeliveryDate"-->
        <!--                    >-->
        <!--                      <el-date-picker-->
        <!--                        v-model="subTableSubmitForm.expectedDeliveryDate"-->
        <!--                        type="date"-->
        <!--                        placeholder="请选择日期"-->
        <!--                      />-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="施工区间：" prop="constructionSection">-->
        <!--                      <el-input-->
        <!--                        v-model="subTableSubmitForm.constructionSection"-->
        <!--                      ></el-input>-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item-->
        <!--                      label="实际交付日期："-->
        <!--                      prop="actualDeliveryDate"-->
        <!--                    >-->
        <!--                      <el-date-picker-->
        <!--                        v-model="subTableSubmitForm.actualDeliveryDate"-->
        <!--                        type="date"-->
        <!--                        placeholder="请选择日期"-->
        <!--                      />-->
        <!--                    </el-form-item>-->
        <!--                    <el-form-item label="备注：" prop="remark">-->
        <!--                      <el-input v-model="subTableSubmitForm.remark"></el-input>-->
        <!--                    </el-form-item>-->
        <!--                  </el-form>-->
        <!--                </template>-->
        <!--              </sub-table>-->
        <!--            </el-tab-pane>-->
        <!--            <el-tab-pane label="审批流程" name="审批流程"></el-tab-pane>-->
        <!--          </el-tabs>-->
        <!--        </el-form-item>-->
      </el-form>
    </template>
    <template #detailFormDialog>
      <h3 style="text-align: center">海隆软件订单</h3>
      <div style="height: 60px">
        <qrcode-vue
          style="float: left"
          :value="submitForm.no"
          size="50"
          level="H"
        />
        <div style="float: right; text-align: right; margin-top: 10px">
          制单人: {{ submitForm.modifiedUser }}&nbsp;&nbsp;&nbsp;&nbsp;制单日期:
          {{ submitForm.modifiedGmt }}
        </div>
      </div>
      <div style="border: #000000 1px solid">
        <el-row>
          <el-col :span="6" style="border: #000000 1px solid"
            >订单名称:{{ submitForm.name }}</el-col
          >
          <el-col :span="6" style="border: #000000 1px solid"
            >订单编号:{{ submitForm.no }}</el-col
          >
          <el-col :span="6" style="border: #000000 1px solid"
            >合同名称:{{ submitForm.contractName }}</el-col
          >
          <el-col :span="6" style="border: #000000 1px solid"
            >合同号:{{ submitForm.contractNo }}</el-col
          >
          <el-col :span="6" style="border: #000000 1px solid"
            >订单名称:{{ submitForm.name }}</el-col
          >
          <el-col :span="6" style="border: #000000 1px solid"
            >订单编号:{{ submitForm.no }}</el-col
          >
          <el-col :span="6" style="border: #000000 1px solid"
            >合同名称:{{ submitForm.contractName }}</el-col
          >
          <el-col :span="6" style="border: #000000 1px solid"
            >合同号:{{ submitForm.contractNo }}</el-col
          >
        </el-row>
        <el-table class="detail-form" :span="6" :data="submitForm.children">
          <template v-for="(item, key) in subTableFieldList" :key="key">
            <el-table-column
              :prop="item.filedName"
              :label="item.label"
              :width="75"
              :min-width="item.minWidth"
            ></el-table-column>
          </template>
        </el-table>
      </div>
    </template>
  </receipts-table>
</template>

<script lang="ts" setup>
import ReceiptsTable from "@/components/receipts/ReceiptsTable.vue";
import { TableUrl } from "@/models/TableSetting";
import { defineEmits, defineProps, inject, ref, withDefaults } from "vue";
import { Receipts } from "@/models/Receipts";
import api from "@/utils";
import { AxiosResponse } from "axios";

const props = withDefaults(defineProps<ReceiptsProps>(), {
  receiptsName: "",
  receiptsNo: "",
  receiptsType: "",
});

export interface ReceiptsProps {
  receiptsName: string;
  receiptsNo: string;
  receiptsType: string;
}

const url = {
  refreshUrl: "/receipts/" + props.receiptsName,
  modifyingSingleUrl: "/receipts/" + props.receiptsName,
  deleteUrl: "/receipts/" + props.receiptsName + "/batchDelete",
} as TableUrl;

// 校验规则
const formRules = {
  noHand: [
    {
      required: true,
      message: "编号不能为空",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "单据名不能为空",
      trigger: "blur",
    },
  ],
};
// 数据规范, 表中没有需要规范格式的数据, 则不需要这一行.
const dataFormat = (
  columnName: string,
  cellValue: string,
  callback: (value: string) => void
) => {
  if (columnName === "createUser") {
    callback(cellValue);
  }
};

// 申明表单
const submitFormRef = ref();
const submitForm = ref({} as Receipts);
const receiveIdJsonItems = inject("idJsonItems");

const emit = defineEmits<{
  (e: "clear-id-json"): void;
  (e: "pose-id-json", idJson: unknown): void;
}>();

const setFormInitValue = (formType: string, row: Receipts) => {
  if (undefined !== submitFormRef.value) {
    submitFormRef.value.clearValidate();
  }
  switch (formType) {
    case "insert":
      submitForm.value = {
        no: "",
        name: "",
        remark: "",
        createUser: sessionStorage.getItem("token") as string,
        createGmt: new Date(),
      } as Receipts;
      emit("clear-id-json");
      getReceiptsNO(props.receiptsNo, "001");
      submitForm.value.receiptsType = props.receiptsType;

      break;
    case "update":
      submitForm.value = row;
      emit("pose-id-json", submitForm.value.idJson);
      submitForm.value.modifiedUser = sessionStorage.getItem("token") as string;
      submitForm.value.modifiedGmt = new Date();
      break;
  }
};

/**
 * 提交数据前的校验
 * @param callback 回调函数,将校验结果返还到Table组件中.
 */
const submitValid = (callback: (value: boolean) => void) => {
  submitForm.value.idJson = receiveIdJsonItems;
  submitFormRef.value
    .validate()
    .then(() => {
      callback(true);
    })
    .catch(() => {
      callback(false);
    });
};

const getReceiptsNO = (receiptsNo: string, userNo: string) => {
  // console.log(sessionStorage.getItem("userNo") as string);
  // console.log(userNo);
  // console.log(receiptsNo + userNo);
  const date = new Date();
  const dateFormat = api.formatDate(date, "yyyyMM");
  let returnNO = "";
  api.http
    .get(
      "/receipts/receipts/generateReceiptsNo/" +
        receiptsNo +
        userNo +
        dateFormat
    )
    .then((res: AxiosResponse) => {
      console.log(res);
      returnNO = res.data;
      submitForm.value.no = returnNO;
    })
    .catch((err: string) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
